<template>

  <div class="business-handling">
        <div class="b-h-left">
            <ProgressTable></ProgressTable>
        </div>
        <div class="b-h-right">
          <div class="chart-top">
            <div class="title"></div>
            <div class="zhu-chart" id="zhuChart"></div>
          </div>
          <div class="chart-bottom">
            <div class="title"></div>
            <div class="mission-profile">
              <div class="pie-chart" id="pieChart"></div>
              <div class="jt-qk"></div>
            </div>

          </div>
        </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { zhuOptions, pieOptions } from './chartsOptions'
import ProgressTable from './components/ProgressTable'
 export default {
   name: 'Dashboard',
   components: {
     ProgressTable
   },
   data(){
     return {
       zhChart: null,
       zhuOptions: {},
       pieChart: null,
       pieOptions: {},
     }
   },
   created(){
     this.zhuOptions = zhuOptions;
     this.pieOptions = pieOptions;

   },
   mounted () {
     this.initZhuChart();
     window.addEventListener('resize', () => {
       this.zhuCharts.resize();
       this.pieCharts.resize();
     })
   },
   methods: {
     initZhuChart(){
       this.zhuCharts = echarts.init(document.getElementById('zhuChart'));
       this.zhuCharts.setOption(this.zhuOptions);
       this.pieCharts = echarts.init(document.getElementById('pieChart'));
       this.pieCharts.setOption(this.pieOptions);
     }
   },
   chartResize(){

   },
   destroyed(){
     window.removeEventListener('resize', null);
   }
 }
</script>
<style lang="scss" scoped>
.business-handling{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  //padding: 20px;
  background-color: #F3F3F5;
  display: flex;
  flex-direction: row;
  .b-h-left{
    flex: 1;
    height: 100%;
    background-color: #fff;
  }
  .b-h-right{
    flex: 1;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    .chart-top{
      flex: 1;
      background-color: #fff;
      .title{
        height: 60px;
        width: 100%;
      }
      .zhu-chart{
        height: calc(100% - 60px);
      }
    }
    .chart-bottom{
      flex: 1;
      margin-top: 10px;
      background-color: #fff;
      .title{
        height: 60px;
        width: 100%;
      }
      .mission-profile{
        height: calc(100% - 60px);
        display: flex;
        flex-direction: row;
        .pie-chart{
          flex: 1.2;
          height: 100%;
        }
        .jt-qk{
          flex: 1;
          height: 100%;
        }
      }
    }
  }
}
</style>
